import React, { useEffect } from "react";
import { Modal, Form, Input, Row, Col } from "antd";
import XlSelect from "@/components/Form/XlSelect";
import { modalPropsType } from '@/constants/types';
import { useModel } from "@umijs/max";

const {Item} = Form;
const rules = [{required: true, message: '此项必填'}];
const layout = {
  labelCol: {
    span: 6
  }
}

const DestUpdateModal = ({title, currentRow, onSubmit, loading, onCancel, visible}: modalPropsType ) => {
  const [form] = Form.useForm();
  const {getDict} = useModel('dictModel');

  const destTypes = getDict('destType');
  const countrys = getDict('country');


  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      ...res,
      countryName: countrys.find((v: {dictValue: string; dictLabel: string}) => v.dictValue === res.country)?.dictLabel
    });
  }

  useEffect(() => {
    if (currentRow?.id) {
      form.setFieldsValue({...currentRow});
    }
  }, [currentRow?.id])
  
  return (
    <Modal
      title={title}
      open={visible}
      width="750px"
      maskClosable={false}
      confirmLoading={loading}
      onOk={handleSubmit}
      onCancel={onCancel}
     >
      <Form form={form} {...layout}>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="destType" rules={rules} label="地址类型">
              <XlSelect
                options={destTypes}
                dataLabel="dictLabel"
                dataValue="dictValue"
              />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="country" rules={rules} label="国家">
            <XlSelect
                options={countrys}
                dataLabel="dictLabel"
                dataValue="dictValue"
              />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="zip" rules={rules} label="Zip">
              <Input />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="destCode" rules={rules} label="Code">
              <Input />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="state" rules={rules} label="State">
              <Input />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="city" rules={rules} label="City">
              <Input />
            </Item>
          </Col>
        </Row>
        <Row gutter={20}>
          <Col span={12}>
            <Item name="address" rules={rules} label="详细地址">
              <Input.TextArea rows={3} />
            </Item>
          </Col>
        </Row>
      </Form>
     </Modal>
  );
}
export default DestUpdateModal;